<template>
  <!-- 详情面板主容器 -->
  <div class="detailpannel">
    <div>
      <!-- 节点被选中时显示节点详情面板 -->
      <div v-if="status=='node-selected'" class="pannel" id="node_detailpannel">
        <div class="pannel-title">模型详情</div>
        <div class="block-container">
          <el-row :gutter="10">
            <el-col :span="8">名称</el-col>
            <el-col :span="16">
              <!-- 节点名称输入框，支持双向绑定和修改事件 -->
              <el-input v-model="node.label" @change="handleChangeName" />
            </el-col>
            <el-col :span="8">任意属性</el-col>
            <el-col :span="16">
              <!-- 节点自定义属性输入框 -->
              <el-input v-model="node.xxx" />
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 画布被选中时显示画布设置面板 -->
      <div v-if="status==='canvas-selected'" class="pannel" id="canvas_detailpannel">
        <div class="pannel-title">画布</div>
        <div class="block-container">
          <!-- 网格对齐开关 -->
          <el-checkbox v-model="showGrid" @change="changeGridState">网格对齐</el-checkbox>
        </div>
      </div>
      <!-- <div v-if="status==='group-selected'" class="pannel" id="node_detailpannel">
        <div class="pannel-title">群组详情</div>
        <div class="block-container">
          <div class="p">
            名称：
            <el-input v-model="name" />
          </div>
          <div class="p">
            任意属性：
            <el-input v-model="color" />
          </div>
        </div>
      </div>
      -->
    </div>
  </div>
</template>

<script>
// 引入事件总线和 G6 网格插件
import eventBus from "@/utils/eventBus";
import Grid from "@antv/g6/build/grid";
export default {
  data() {
    return {
      status: "canvas-selected", // 当前面板状态（node-selected/canvas-selected）
      showGrid: false,           // 是否显示网格
      page: {},                  // 当前页面对象
      graph: {},                 // G6 图实例
      item: {},                  // 当前选中元素
      node: {},                  // 当前选中节点数据
      grid: null                 // 网格插件实例
    };
  },
  created() {
    // 初始化并绑定事件
    this.init();
    this.bindEvent();
  },
  methods: {
    // 初始化方法（预留）
    init() {},
    // 绑定事件，监听节点/画布选中变化
    bindEvent() {
      let self = this;
      // 监听页面添加后，获取 graph 实例
      eventBus.$on("afterAddPage", page => {
        self.page = page;
        self.graph = self.page.graph;
        // 监听节点选中变化
        eventBus.$on("nodeselectchange", item => {
          if (item.select === true && item.target.getType() === "node") {
            self.status = "node-selected"; // 切换为节点详情面板
            self.item = item.target;
            self.node = item.target.getModel();
          } else {
            self.status = "canvas-selected"; // 切换为画布面板
            self.item = null;
            self.node = null;
          }
        });
      });
    },
    // 修改节点名称时触发
    handleChangeName(e) {
      const model = {
        label: e
      };
      this.graph.update(this.item, model);
    },
    // 网格对齐开关切换
    changeGridState(value) {
      if (value) {
        this.grid = new Grid();
        this.graph.addPlugin(this.grid);
      } else {
        this.graph.removePlugin(this.grid);
      }
    }
  }
};
</script>

<style scoped>
/* 详情面板主样式 */
.detailpannel {
  height: 100%;
  position: absolute;
  right: 0px;
  z-index: 2;
  background: #f7f9fb;
  width: 200px;
  border-left: 1px solid #e6e9ed;
}
.detailpannel .block-container {
  padding: 16px 8px;
}
.block-container .el-col {
  height: 28px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.pannel-title {
  height: 32px;
  border-top: 1px solid #dce3e8;
  border-bottom: 1px solid #dce3e8;
  background: #ebeef2;
  color: #000;
  line-height: 28px;
  padding-left: 12px;
}
</style>
